/*
  Ahmia styles
*/

/* color schemes */
@dark-bg-color: #000;
@light-bg-color: #fafafa;

/*
  Interesting colors to try:
  #c7ff70
  #ff707d
  #70d5ff
*/
/*
@accent-color: #70d5ff;
@accent-color-alpha: rgba(112, 213, 255, 0.2);
@accent-color: #ff707d;
@accent-color-alpha: rgba(255, 112, 125, 0.2);
*/
@accent-color: #303030;
@accent-color-alpha: rgba(48, 48, 48, 0.2);
@accent-complementary: #c7ff70;
@accent-complementary-alpha: rgba(199, 255, 112, 0.2);
@link-color-dark: #000;
@link-color-light: #bbb;

@text-on-dark-bg: #fff;
@text-on-light-bg: #000;
@text-on-light-bg-placeholder: #555;

@light-white-alpha: rgba(255, 255, 255, 0.8);
@medium-white-alpha: rgba(255, 255, 255, 0.4);
@dark-white-alpha: rgba(255, 255, 255, 0.2);

@ultralight-grey-alpha: rgba(127, 127, 127, 0.2);
@light-grey-alpha: rgba(0, 0, 0, 0.2);
@dark-grey-alpha: rgba(0, 0, 0, 0.9);
@medium-grey-alpha: rgba(0, 0, 0, 0.4);
@font-baseline-px: 12px;

@common-link-color: #19749b;
@common-link-color-visited: #294957;

@color-warning-background: @accent-complementary;
@color-warning: @dark-grey-alpha;

@color-error-background: #ff707d;
@color-error: @dark-grey-alpha;

/*
  LINK COLORS

  Links in search results are different than others.
  This is for consistency -- nearly all search engines
  look like this, there is no need to change that here
*/
@search-result-body-color: @dark-grey-alpha;
@search-result-link-color: @common-link-color;
@search-result-link-color-visited: #52f;
@search-result-link-color-active: @common-link-color-visited;
@search-result-metadata-subdued: @medium-grey-alpha;
@search-result-metadata-link-color: @medium-grey-alpha;
@search-result-metadata-link-color-visited: @medium-grey-alpha;
@search-result-metadata-link-color-active: @medium-grey-alpha;

/* fonts */
@font-face {
    font-family: 'alfphabetiv';
    src: url('/static/fonts/alfphabet/alfphabet-iv-webfont.eot');
    src: url('/static/fonts/alfphabet/alfphabet-iv-webfont.eot?#iefix') format('embedded-opentype'),
         url('/static/fonts/alfphabet/alfphabet-iv-webfont.woff2') format('woff2'),
         url('/static/fonts/alfphabet/alfphabet-iv-webfont.woff') format('woff'),
         url('/static/fonts/alfphabet/alfphabet-iv-webfont.ttf') format('truetype'),
         url('/static/fonts/alfphabet/alfphabet-iv-webfont.svg#alfphabetiv') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotoregular';
    src: url('/static/fonts/roboto/roboto_regular_macroman/Roboto-Regular-webfont.eot');
    src: url('/static/fonts/roboto/roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/static/fonts/roboto/roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
         url('/static/fonts/roboto/roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
         url('/static/fonts/roboto/roboto_regular_macroman/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotolight';
    src: url('/static/fonts/roboto/roboto_light_macroman/Roboto-Light-webfont.eot');
    src: url('/static/fonts/roboto/roboto_light_macroman/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/static/fonts/roboto/roboto_light_macroman/Roboto-Light-webfont.woff') format('woff'),
         url('/static/fonts/roboto/roboto_light_macroman/Roboto-Light-webfont.ttf') format('truetype'),
         url('/static/fonts/roboto/roboto_light_macroman/Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;

}


/* dumb mixins */
.responsive {
  box-sizing: border-box;
}
.sr {
  position: absolute;
  display: block;
  top: -1000px;
  left: -1000px;
  width: 5px; height: 5px;
  color: transparent;
  background-color: transparent;
}
.hidden {
  display: none;
}

/* core controls */
.searchForm {
  input[type=search], input[type=text] {
    .responsive;
    color: @text-on-light-bg;
    /* color: @text-on-light-bg-placeholder; */
    font-size: 1.6em;
    font-family: 'robotolight', Roboto, Helvetica, sans-serif;
    line-height: 1.8em;
    padding-left: 0.5em;
    text-align: left;
    min-width: 20em;
    border: 0;
    border-top: 2px solid @medium-grey-alpha;
    box-shadow: 0 0 0.5em @dark-grey-alpha;
  }
  input[type=submit] {
    .responsive;
    font-family: 'robotolight', Roboto, Helvetica, sans-serif;
    display: inline-block;
    background-color: @accent-complementary;
    color: @link-color-dark;
    border: 1px solid @accent-complementary;
    border-top-width: 2px;
    font-size: 1.6em;
    line-height: 1.8em;
    text-align: center;
    padding: 0 0.8em;
    &:hover {
      color: @common-link-color-visited;
      text-shadow: 0 -1px 0 @light-grey-alpha;

      transition: all 0.2s;
    }
  }
}

div#flashMessage, div.flashMessage {
  margin: 0 auto 1em;
  p {
    text-align: center;
    border-bottom: none;
    padding: 1em;
    margin: 0 0 1em 0;
  }
  p.info {
    background-color: @light-grey-alpha;
    color: @medium-grey-alpha;
  }
  p.warn {
    background-color: @color-warning-background;
    color: @color-warning;
  }
  p.error {
    background-color: @color-error-background;
    color: @color-error;
  }
}


/*
  "main"/desktop search styles
  TODO: move to media query
*/
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  &.main { background-color: @dark-bg-color; overflow: hidden; }
  background-color: @light-bg-color;
  font-family: 'robotoregular', 'Roboto', 'Helvetica', sans-serif;
  font-weight: light;
  font-size: @font-baseline-px;

  a{
    &:link {
      color: @common-link-color;
      text-decoration: underline;
      transition: color 0.3s;
    }
    &:visited {
      color: @common-link-color-visited;
      text-decoration: underline;
    }
    &:hover {
      color: @common-link-color-visited;
      text-decoration: none;
      transition: color 0.3s;
    }
  }

  code {
    font-family: monospace;
  }
}

#imageOverlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0.4;
  background-color: @dark-bg-color;
  background-image: url('/static/images/metro.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}

div.elastic.outer {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
}
div.elastic.inner {
  display: block;
  width: 80%;
  margin: 0 auto;
}

#notTorBrowserWarning { display: none; }

#ahmiaHeader {
  overflow: hidden;
  color: @text-on-dark-bg;
  &.mini {
    h1 { display: none; }
    #searchForm { display: none; }

    position: absolute;
    top: 0; left: 0;
    width: 100%;
    border-bottom: 1px solid @medium-grey-alpha;
  };
  &.maxi {
    .maxiContent {
       margin: 0 1.0em 0;
       padding-bottom: 1.0em;
       h1 {
        font-family: 'alfphabetiv', 'Alfphabet IV', 'Alfphabet', 'Helvetica', sans-serif;
        font-size: 2.0em;
        a {
          color: rgba(255,255,255,0.7);
          box-shadow: none;
          text-decoration: none;
          transition: 0.3s all;
          &:hover {
            text-decoration: none;
            color: @text-on-dark-bg;
            text-shadow: 0 -1px 0 @medium-grey-alpha;
            transition: 0.3s all;
          }
        }
        margin: 0.5em 0;
        padding: 0;
        display: block; float: left;
      }
      .searchForm {
        display: block;
        float: left;
        margin-left: 2.0em;
        input {
          font-size: 1.3em;
          line-height: 2.0em;
          margin: 0.5em 0;
        }
        input[type="search"] {
          box-shadow: 0 0 0.1em @medium-grey-alpha;
        }
        input[type="submit"] {
          background-color: @accent-complementary;
          border: 1px solid @accent-complementary;
          margin-left: 0.5em;
          box-shadow: 0 0 0.1em @medium-grey-alpha;
        }
      }
      nav {
        vertical-align: bottom;
      }
    }
  }

  .responsive;
  #collapseIfResponsive { display: none; }
  background-color: @accent-color;
  nav {
    margin: 0;
    border-bottom: 3px solid @medium-grey-alpha;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 0 1em;
  }
  ul {
    margin: 0;
    padding: 0;
    &.primary, &.primary li { float: left; }
    &.secondary, &.secondary li { float: right; }
    &.primary li:first-child { margin-left: 0; }
    &.secondary li:first-child { margin-right: 2em; }

    li {
      margin: 0.4em 0 0.4em 1em;
      display: inline-block;
      float: left;
      list-style-type: none;

      a {
        color: @link-color-light;
        text-decoration: none;
        &:hover {
          text-decoration: underline;
          transition: all 0.2s;
        }
      }
    }
  }
}

#ahmiaMainContent {
  color: @text-on-dark-bg;

  position: absolute;
  left: 5%;
  top: 50%;
  width: 60%;

  transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  -moz-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);

  h1 {
    font-family: 'alfphabetiv', 'Alfphabet IV', 'Alfphabet', 'Helvetica', sans-serif;
    font-size: 3.2em;
    color: @text-on-dark-bg;
    text-shadow: 0 0 0.5em @medium-grey-alpha;
  }

  #ahmiaSearchArea {
    .searchForm;
  }

  #ahmiaDescriptionArea {
    margin-top: 2.5em;
    border-top: 1px solid @medium-white-alpha;
    padding-top: 2.3em;
    a {
      &:link { color: @accent-complementary; text-decoration: none; }
      &:hover { text-decoration: underline; transition: all 0.2s; }
      &:visited { text-decoration: underline; transition: all 0.2s; }
    }
    p {
      font-size: 1.1em;
      margin-top: 0;
      margin-bottom: 1em;
      line-height: 1.7em;
      text-shadow: 0 0 0.5em @dark-grey-alpha;
    }
  }
}

#ahmiaResultsPage {
  margin: 1.0em;
  div.resultsSubheader {
    p {
      color: @medium-grey-alpha;
      margin: 0; padding: 0;
    }
    border-bottom: 1px solid @light-grey-alpha;
    margin-bottom: 1em;
    padding-bottom: 1em;
  }
  p {
    font-size: 1.1em;
    color: @text-on-light-bg;
    margin: 1em 0;
    line-height: 1.7em;
  }
  ol {
    list-style-type: none;
    padding: 0;
    margin: 0 -1em;
    li {
      .responsive;
      border-top: 1px solid transparent;
      border-bottom: 1px solid transparent;
      cursor: pointer;
      padding: 1em;
      transition: background-color 0.3s;
      &.selected {
        border-top-color: @ultralight-grey-alpha;
        border-bottom-color: @ultralight-grey-alpha;
        background-color: @light-white-alpha;
        transition: background-color 0.3s;
        h4 {
          a:link {
            /* mimic li h4 a:hover */
            text-decoration: none;
          }
        }
      }
      p, h4 {
        /* restrict width for legibility */
        max-width: 70%;
      }
      h4 {
        font-weight: normal;
        margin: 0; padding: 0;
        font-size: 1.6em;
        line-height: 1em;
        a {
          &:link {
            color: @search-result-link-color;
            text-decoration: underline;
          }
          &:hover {
            color: @search-result-link-color-active;
            text-decoration: none;
          }
          &:visited {
            color: @search-result-link-color-visited;
            text-decoration: underline;
          }
        }
      }
      p {
        color: @search-result-body-color;
        margin: 0.7em 0 0;
      }
      p.metadata {
        margin: 0.5em 0;
        color: @search-result-metadata-subdued;
        a {
          &:link {
            color: @search-result-metadata-link-color;
            text-decoration: underline;
          }
          &:visited {
            color: @search-result-metadata-link-color-visited;
          }
          &:hover {
            color: @search-result-metadata-link-color-active;
            text-decoration: none;
          }
        }
        span.hidden { display: none; }
      }
    }
  }
  div.pager {
    border-top: 1px solid @light-grey-alpha;
    padding-top: 1em;
    padding-bottom: 5em;
    overflow: hidden;
    a {
      &:link {
        color: @search-result-link-color;
        text-decoration: none;
      }
      &:hover {
        color: @search-result-link-color-active;
        text-decoration: underline;
      }
      &:visited {
        color: @search-result-link-color-visited;
      }
    }

    ul {
      margin: 0;
      padding: 0;
      float: left;
      li {
        font-size: 1.1em;
        margin: 0 1em 0 0; padding: 0;
        list-style-type: none;
        display: inline-block;

        &:first-child {
          margin-right: 2em;
        }
        &:last-child {
          margin-left: 2em;
        }
        &.active {
          a:link, a:hover, a:visited {
            color: @text-on-light-bg;
            text-decoration: none;
          }
        }
        &.endcap {
          a:link, a:hover, a:visited {
            text-decoration: underline;
          }
        }
        &.limited {
          a:link, a:hover, a:visited {
            color: @search-result-metadata-subdued;
            text-decoration: none;
          }
        }
      }
    }
    p.footer {
      margin: 0; padding: 0;
      font-size: 1.1em;
      float: right;
    }
  }
}

#ahmiaDisclaimer {
  width: 70%;
  max-width: 960px;
  margin: 0 auto 3em;
  padding-top: 1em;

  h2, h3, h4 {
    font-family: 'robotolight', Roboto, Helvetica, sans-serif;
  }
  h2 {
    font-size: 1.8em;
  }
  h3 {
    font-size: 1.5em;
  }
  h4 {
    font-size: 1.3em;
  }

  p {
    font-size: 1.3em;
    line-height: 1.8em;
    text-align: left;
    margin-bottom: 1em;
    padding: 0;

    &.end {
      border-bottom: 1px solid @light-grey-alpha;
      margin-bottom: 2em;
      padding-bottom: 2em;
    }
  }
}

#ahmiaAddOnion {
  width: 70%;
  max-width: 960px;
  margin: 0 auto;
  padding-top: 1em;

  p {
    font-size: 1.3em;
    line-height: 1.8em;
    text-align: center;
    border-bottom: 1px solid @light-grey-alpha;
    padding-bottom: 2em;
    margin-bottom: 2em;
  }
  .searchForm;
  div#ahmiaFormContainer  {
    display: block;
    width: 70%;
    overflow: visible;
    margin: -1em auto;
  }
  form {
    display: flex;
    justify-content: center;
  }
  input[type="text"] {
    box-shadow: 0 0 0.1em @medium-grey-alpha;
    margin-right: 0.5em;
  }
}

#ahmiaBlacklist, #ahmiaAddService {
  width: 70%;
  max-width: 960px;
  margin: 0 auto;
  padding-top: 1em;

  p {
    font-size: 1.3em;
    line-height: 1.8em;
    text-align: left;
    &.end {
      border-bottom: 1px solid @light-grey-alpha;
      margin-bottom: 2em;
      padding-bottom: 2em;
    }
  }
  .searchForm;
  div#ahmiaFormContainer  {
    display: block;
    width: 70%;
    overflow: visible;
    margin: 1em auto 7em;

    div#flashMessage {
      margin-top: 1em;
    }
  }
  form {
    display: flex;
    justify-content: center;
  }
  input[type="text"] {
    box-shadow: 0 0 0.1em @medium-grey-alpha;
    margin-right: 0.5em;
  }
  h2, h3, h4 {
    font-family: 'robotolight', Roboto, Helvetica, sans-serif;
  }
  h2 {
    font-size: 1.8em;
  }
  h3 {
    font-size: 1.5em;
    &.checkForm {
      text-align: center;
    }
  }
  h4 {
    font-size: 1.3em;
  }
}

#ahmiaAboutPage {
  /* elasticize this for legibility */
  width: 70%;
  max-width: 960px;
  margin: 0 auto;

  h2, h3, h4 {
    font-family: 'robotolight', Roboto, Helvetica, sans-serif;
  }
  h2 {
    font-size: 1.8em;
  }
  h3 {
    font-size: 1.5em;
  }
  h4 {
    font-size: 1.3em;
  }
  p, li {
    font-size: 1.3em;
    line-height: 1.8em;
  }

  div.aboutAhmia, div.aboutTeam, div.moreOnAhmia, div.credits {
    margin: 1em 0;
    padding: 1em 0;
    border-bottom: 1px solid @light-grey-alpha;
    overflow: hidden;
    h3 {
      color: @dark-grey-alpha;
      margin-top: 0;
      padding-top: 0;
    }
  }
  label {
    display: inline-block;
    width:400px;
    text-align: left;
  }
  div.aboutTeam {
    p {
      margin-top: 1.6em;
    }

    img.teamPhoto {
      padding-bottom: 1em;
      padding-right: 3em;
      float: left;
      width: 160px;
      height: 160px;
    }
    img.github {
      height: 1.3em;
      width: 1.3em;
    }
    img.github_doc {
      height: 2.3em;
      width: 2.3em;
    }
    ul li {
      display:inline-block;
      width: 300px;
      font-size: 1.3em;
    }
  }

  div.credits {
    border-bottom-color: transparent;
    p {
      color: @medium-grey-alpha;
      margin-top: 0;
      text-align: center;
      a {
        &:link, &:visited, &:hover {
          color: @medium-grey-alpha;
        }
        &:hover {
          text-decoration: none;
        }
      }
    }
    ul {
      list-style-type: none;
      display: flex;
      overflow: hidden;
      justify-content: center;
      li {
        display: inline-block;
        margin-right: 1em;
        img {
          border: 0;
          height: 50px;
          opacity: 0.9;
        }
      }
    }
    margin-bottom: 3em;
  }
}
